/* 
  Redirect重定向 - 配合exact使用 
*/

import React, { Component } from 'react';
import './index.css';
// HashRouter————带#号
import {
  HashRouter as Router,
  Route,
  Link,
  Switch,
  Redirect,
} from 'react-router-dom';
export default class App extends Component {
  render() {
    return (
      <div>
        {/* Router负责路由实例化，包裹着所有路由代码 */}
        <Router>
          {/* Link组件，to属性代表我们要跳转的路径，需要以/开头*/}
          <Link to="/">首页</Link> | &nbsp;
          <Link to="/myMusic">我的音乐</Link> | &nbsp;
          <Link to="/myFriend">我的朋友</Link>
          <br />
          {/* Switch作用：匹配到任意一个路径，就会停止匹配 */}
          <Switch>
            {/* Redirect重定向 - 配合exact使用  */}
            {/* from代表需要重定向的路径，to代表实际去到的路径 */}
            {/* 使用精确匹配，如果输入/redirect路径，那么我们就给他跳转到/myMusic页面 */}
            <Redirect from="/redirect" to="/myMusic" exact></Redirect>
            <Route path="/" component={Home} exact></Route>
            <Route path="/myMusic" component={MyMusic}></Route>
            <Route path="/myFriend" component={MyFriend}></Route>

            {/* 404一定是通配--不写path匹配所有不存在的页面，并且要写在最后面 */}
            <Route component={NotFount}></Route>
          </Switch>
        </Router>
      </div>
    );
  }
}

function NotFount() {
  return <h3>我是NotFount-404页面</h3>;
}
function Home() {
  return <h3>我是首页组件</h3>;
}
function MyMusic() {
  return <h3>我是我的音乐组件</h3>;
}
function MyFriend() {
  return (
    <div>
      <h3>我是我的朋友组件</h3>
    </div>
  );
}
